<template>
	<div>
		<!-- 主题 -->
		<el-container>
			<el-header>
				<div>
					<el-row>
						<el-col :span="6">
							<el-date-picker  v-model="byInputtingTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择建档时间：">
							</el-date-picker>
						</el-col>
						<el-col :span="7" :offset="2">
							<el-input placeholder="" v-model="productUseType">
								<template slot="prepend">产品用途类型：</template>
							</el-input>
						</el-col>
						<el-col :span="7" :offset="2">
							<el-input v-model="productName" class="input-with-select">
								<template slot="prepend">产品名：</template>
								<el-button slot="append" icon="el-icon-search" @click="selectProductProfileInformation()"></el-button>
							</el-input>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<div class="reCheckProductSumClass">
								符合条件的产品档案总数：{{reCheckProductSum}}例
							</div>
						</el-col>
					</el-row>
				</div>
			</el-header>
			<el-main style="height: 435px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px;margin-top: 25px;">
				<!-- 表格 -->
				<div>
					<template>
						<el-table :data="tableData" stripe style="width: 100%">
							<el-table-column prop="date" label="日期" width="180">
							</el-table-column>
							<el-table-column prop="name" label="姓名" width="180">
							</el-table-column>
							<el-table-column prop="address" label="地址">
							</el-table-column>
						</el-table>
					</template>
					<template>
						<!--@size-change：当条数发现改变时触发-->
						<!--@current-change：当页码发生改变时触发-->
						<el-pagination style="margin-top: 5px;" layout="sizes, prev, pager, next, jumper, ->, total" :total="total"
						 :page-size.sync="pageSize" :page-sizes="pageSizes" :current-page.sync="currentPage" :pager-count="pagerCount"
						 background @size-change="handleSizeChange" @current-change="handleCurrentChange">
						</el-pagination>
					</template>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'productFileChange',
		data() {
			return {
				/* 所有产品信息 */
				reCheckProductSum: 4,
				/* 搜索：建档时间 */
				byInputtingTime: '',
				/* 产品用途类型 */
				productUseType: '',
				/* 产品名 */
				productName: '',
				/* 分页 */
				total: 500, //总条数
				pageSize: 5, //每页显示多少条
				pageSizes: [2, 3, 5, 6], //每页显示条数候选值
				currentPage: 1, //当前页
				pagerCount: 5, //最多显示的页码，多余的会折叠
				/* 测试数据 */
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}],
			}
		},
		methods: {
			/* 查找方法 */
			selectProductProfileInformation() {

			},
			/* 改变size[每页条数]调用方法*/
			handleSizeChange(size) {
				/* 只要改变马上调用分页查询 */
				this.selectProductProfileInformation();
			},
			
			/* 改变page[当前页码]调用方法*/
			handleCurrentChange(page) {
				/* 只要改变马上调用分页查询 */
				this.selectProductProfileInformation();
			},
		},
	}
</script>

<style scoped>
	.el-header{
		background-color: #333333;
		margin-top: 15px;
	}
	
	.el-main {
		background-color: #FFFFFF;
	}
</style>
